<template>
  <!-- 导入数据的类型 -->
  <a-form class="form-section">
    <a-form-item
      label="数据类型"
      :label-col="{ span: 3 }"
      :label-align="'left'"
    >
      <!-- 选择数据类型 新用户引导 step-3 -->
      <guide-step-popover :guide-step="3">
        <template #header>
          <a-button-group v-model="selectedDataType" class="import-data-type">
            <a-button
              v-for="(dataType, index) in dataTypes"
              :key="index"
              :value="dataType.type"
              :class="
                dataType.type === selectedDataType
                  ? 'active-type-button'
                  : 'primary-type-button'
              "
              @click="changeDataType(dataType.type)"
            >
              {{ dataType.name }}
            </a-button>
          </a-button-group>
        </template>
      </guide-step-popover>
      <!-- 说明 -->
      <div
        class="import-data-type-prompt"
        :class="{
          'graph-type-prompt': selectedDataType === 'graph',
          'is-note-unfold': isNoteUnfold,
        }"
      >
        <div>说明：</div>
        <div
          v-for="(item, index) in dataTypeUploadInformation[selectedDataType]"
          :key="index"
        >
          {{ item }}
          <template v-if="selectedDataType === 'graph' && index === 2">
            <pre>{{ graphDataExample }}</pre>
            （*为可选字段；id必须为整数，包括边的source和target；未设边的directed属性时默认为无向）
          </template>
        </div>
      </div>
      <div
        v-if="selectedDataType === 'graph'"
        class="import-data-note-fold"
        @click="isNoteUnfold = !isNoteUnfold"
      >
        {{ isNoteUnfold ? '收起' : '展开' }}
        <a-icon class="up-down" :type="isNoteUnfold ? 'up' : 'down'" />
      </div>
    </a-form-item>
  </a-form>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
import GuideStepPopover from '@/components/user-guide/GuideStepPopover.vue'
import UserGuideStore from '@/store/modules/user-guide'

@Component({
  name: 'DataTypeTab',
  components: {
    GuideStepPopover,
  },
})
export default class DataTypeTab extends Vue {
  @Prop({ type: String, default: 'table' }) selectedDataType!: string // 数据导入类型

  private isNoteUnfold: boolean = false

  public dataTypes: any[] = [
    {
      type: 'table',
      name: '表格文件',
    },
    {
      type: 'database',
      name: '数据库',
    },
    {
      type: 'graph',
      name: '图文件',
    },
    {
      type: 'http',
      name: 'http数据',
    },
    {
      type: 'gis',
      name: 'GIS数据',
    },
    {
      type: 'k_graph',
      name: '图谱文件',
    },
    // {
    //  type: 'other',
    //  name: 'other数据'
    // }
  ]

  public dataTypeUploadInformation: any = {
    table: [
      '1、支持表格文件格式：csv、excel;',
      '2、文件大小限制：csv——10G，excel——1G。若excel上传失败可另存为csv格式再次尝试;',
      '3、不支持多级标题的表格文件，不支持处理超过10个sheet的excel文件;',
      '4、默认编码：utf-8。若上传完成后预览数据为空，请选择正确的文件编码。',
    ],
    database: ['1、支持数据库类型：Mysql、oracle、Rds-Mysql。'],
    graph: [
      '1、支持文件格式：json、csv、gml(csv文件需要点数据和边数据独立上传);',
      '2、文件大小限制：2GB;',
      '3、数据格式：',
    ],
    http: ['1、支持表格文件格式：txt、json;', '2、文件大小限制：100MB。'],
    gis: [
      '1、支持表格文件格式：excel、csv、shapefile(至少包括.dbf、.shp、.shx 文件，如果没有上传.prj文件，则使用默认坐标系WGS_1984);',
      '2、文件大小限制：1GB;',
      '3、数据表格类型文件：若为点类型，要求有经度、纬度为独立的两列数据；若为面数据，要求有一列为行政区名;',
      '4、shapefile文件导入暂不支持导入数据预览。',
    ],
    k_graph: ['1、支持文件格式：OWL', '2、文件大小限制：1GB'],
    // other: ['...', '...', ?]
  }

  private graphDataExample: string =
    '{\n' +
    '  "nodes": [\n' +
    '    {\n' +
    '      "id": 0,\n' +
    '      "categoryId": 1,\n' +
    '      *"label": "node0",\n' +
    '      *"attributes": {},\n' +
    '      *"config": {}\n' +
    '    },\n' +
    '    {\n' +
    '      "id": 1,\n' +
    '      "categoryId": 2,\n' +
    '      *"label": "node1",\n' +
    '      *"attributes": {},\n' +
    '      *"config": {}\n' +
    '    }\n' +
    '   ],\n' +
    '  "links": [\n' +
    '    {\n' +
    '      "id": 0,\n' +
    '      "source": 0,\n' +
    '      "target": 1,\n' +
    '      *"label": "link0",\n' +
    '      *"directed": false,\n' +
    '      *"weight": 1,\n' +
    '      *"attributes": {},\n' +
    '      *"config": {}\n' +
    '    }\n' +
    '  ]\n' +
    '}'

  @Watch('selectedDataType')
  private selectedDataTypeChange() {
    this.isNoteUnfold = false
  }

  public changeDataType(type: string) {
    // 在 用户引导状态下 当还没有确认导入数据前， 切换数据类型， 提示步骤回到 step-3
    UserGuideStore.toSpecifiedGuideStep(3)
    if (UserGuideStore.newUserGuideMode && type === 'graph') {
      this.$message.warn('新用户引导过程为更好体验禁止选择图文件！')
      return
    }
    this.$emit('change', type)
  }
}
</script>

<style lang="less" scoped>
@import './data-type';

// 按钮样式
/deep/ .import-data-type {
  display: flex;
  width: 424px;

  button {
    color: #5d637e;
    font-size: 14px;
    font-weight: 400;
    height: 28px;
    letter-spacing: 1px;
    line-height: 28px;
    width: 106px;
  }

  .active-type-button {
    background: #6973ff;
    color: #fff;
  }
}

/* 说明 */
.import-data-type-prompt {
  background: rgba(0, 0, 0, 0.02);
  margin-left: 110px;
  margin-right: 21px;
  margin-top: 8px;
  min-width: 300px;
  padding: 8px 10px;
  width: calc(100% - 121px);

  div {
    color: rgba(0, 0, 0, 0.4);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 17px;
    min-height: 17px;
  }

  pre {
    margin-bottom: 6px;
  }
}

// 图数据（height 80px 默认折叠）
.graph-type-prompt {
  height: 80px;
  overflow: hidden;
}

// 图数据展开
.is-note-unfold {
  height: auto;
}

.import-data-note-fold {
  background: rgba(0, 0, 0, 0.02);
  color: rgba(0, 0, 0, 0.4);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  height: 24px;
  line-height: 24px;
  margin-left: 110px;
  margin-right: 21px;
  text-align: center;
  width: calc(100% - 121px);
}
</style>
